<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎭 表情符号剧本杀 🕵️‍♂️</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #2c3e50;
            color: #ecf0f1;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #34495e;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 25px;
            color: #f1c40f;
            font-size: 2.2rem;
        }
        
        .page {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 角色选择页面 */
        .character-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 30px;
        }
        
        .character-card {
            background-color: #2c3e50;
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            border: 2px solid #7f8c8d;
        }
        
        .character-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            border-color: #f1c40f;
        }
        
        .character-card.active {
            border-color: #f1c40f;
            box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
        }
        
        .character-emoji {
            font-size: 3rem;
            margin-bottom: 10px;
        }
        
        .character-card h3 {
            color: #f1c40f;
            margin-bottom: 5px;
        }
        
        .character-card .role {
            color: #bdc3c7;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .character-card .motive {
            font-size: 0.8rem;
            color: #e74c3c;
            margin-top: 10px;
        }
        
        /* 对话页面 */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 500px;
            background-color: #2c3e50;
            border-radius: 12px;
            border: 1px solid #7f8c8d;
            overflow: hidden;
        }
        
        .chat-header {
            background: linear-gradient(90deg, #e74c3c, #f39c12);
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        .chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: rgba(44, 62, 80, 0.7);
        }
        
        .message {
            margin-bottom: 15px;
            padding: 12px 15px;
            border-radius: 18px;
            max-width: 80%;
            position: relative;
            animation: fadeIn 0.3s ease;
            line-height: 1.5;
        }
        
        .message-ai {
            background-color: #7f8c8d;
            color: #ecf0f1;
            align-self: flex-start;
            border-bottom-left-radius: 5px;
            margin-right: auto;
        }
        
        .message-user {
            background-color: #3498db;
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 5px;
            margin-left: auto;
        }
        
        .message-system {
            background-color: #8e44ad;
            color: #ecf0f1;
            align-self: center;
            text-align: center;
            width: 90%;
            margin: 15px auto;
            font-size: 0.9rem;
        }
        
        .chat-input {
            display: flex;
            padding: 15px;
            background-color: #2c3e50;
            border-top: 1px solid #7f8c8d;
        }
        
        .chat-input input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #7f8c8d;
            border-radius: 25px;
            background-color: #34495e;
            color: #ecf0f1;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .chat-input input:focus {
            border-color: #f1c40f;
        }
        
        .chat-input button {
            background-color: #f39c12;
            color: white;
            border: none;
            border-radius: 25px;
            padding: 0 25px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .chat-input button:hover {
            background-color: #e67e22;
            transform: translateY(-2px);
        }
        
        .back-btn {
            background-color: transparent;
            color: #f1c40f;
            border: 1px solid #f39c12;
            border-radius: 25px;
            padding: 10px 25px;
            margin-top: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }
        
        .back-btn:hover {
            background-color: rgba(243, 156, 18, 0.2);
        }
        
        .typing-indicator {
            display: inline-block;
            padding: 10px 15px;
            background-color: #7f8c8d;
            border-radius: 18px;
            color: #bdc3c7;
        }
        
        .typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #bdc3c7;
            border-radius: 50%;
            margin: 0 2px;
            animation: typing 1s infinite ease-in-out;
        }
        
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typing {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        
        /* 线索面板 */
        .clue-panel {
            background-color: #2c3e50;
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            border: 1px solid #7f8c8d;
        }
        
        .clue-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        
        .clue-card {
            background-color: #34495e;
            border-radius: 8px;
            padding: 15px;
            border-left: 4px solid #f39c12;
        }
        
        .clue-card h3 {
            color: #f1c40f;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .clue-card p {
            color: #bdc3c7;
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .character-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .clue-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .character-grid {
                grid-template-columns: 1fr;
            }
            
            .chat-container {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎭 时空旅社谋杀案 🕵️‍♂️</h1>
        
        <!-- 角色选择页面 -->
        <div class="page active" id="characterPage">
            <h2>👥 选择你要询问的角色</h2>
            <p>2089年，在一家能穿越时空的旅社中，著名科学家马克西姆博士被发现死于自己的房间。作为时空警探，你需要通过询问嫌疑人找出真相。</p>
            
            <div class="character-grid">
                <div class="character-card" data-character="ai">
                    <div class="character-emoji">🤖</div>
                    <h3>NOVA-7</h3>
                    <div class="role">AI管家</div>
                    <div class="motive">动机：可能有自己的秘密计划</div>
                </div>
                <div class="character-card" data-character="wife">
                    <div class="character-emoji">👩</div>
                    <h3>艾琳娜</h3>
                    <div class="role">妻子</div>
                    <div class="motive">动机：丈夫可能修改遗嘱</div>
                </div>
                <div class="character-card" data-character="assistant">
                    <div class="character-emoji">👨‍🔬</div>
                    <h3>维克多</h3>
                    <div class="role">助手</div>
                    <div class="motive">动机：与博士有激烈争执</div>
                </div>
                <div class="character-card" data-character="investor">
                    <div class="character-emoji">👔</div>
                    <h3>张先生</h3>
                    <div class="role">投资人</div>
                    <div class="motive">动机：与博士理念不合</div>
                </div>
                <div class="character-card" data-character="timetraveler">
                    <div class="character-emoji">👤</div>
                    <h3>神秘人X</h3>
                    <div class="role">时空旅客</div>
                    <div class="motive">动机：来自未来目的不明</div>
                </div>
                <div class="character-card" data-character="cleaner">
                    <div class="character-emoji">🧹</div>
                    <h3>老李</h3>
                    <div class="role">清洁工</div>
                    <div class="motive">动机：知道所有秘密</div>
                </div>
            </div>
        </div>
        
        <!-- 对话页面 -->
        <div class="page" id="chatPage">
            <div class="chat-container">
                <div class="chat-header" id="chatHeader">
                    请选择一个角色开始对话
                </div>
                <div class="chat-messages" id="chatMessages">
                    <div class="message message-system">
                        🕰️ 欢迎来到时空旅社谋杀案调查。2089年3月15日，著名时空科学家马克西姆博士在自己的房间内死亡。
                    </div>
                    <div class="message message-system">
                        🔍 死亡时间在时空扭曲期间，使得调查异常复杂。请从左侧选择一个角色开始询问。
                    </div>
                </div>
                <div class="chat-input">
                    <input type="text" id="userInput" placeholder="输入你的问题..." autocomplete="off">
                    <button id="sendBtn">发送</button>
                </div>
            </div>
            
            <div class="clue-panel">
                <h2>🔎 收集到的线索</h2>
                <div class="clue-grid" id="clueGrid">
                    <div class="clue-card">
                        <h3>案发现场</h3>
                        <p>博士死于房间内，检测出高级神经毒素，房间门锁完好但窗户有异常开启记录。</p>
                    </div>
                    <div class="clue-card">
                        <h3>死亡时间</h3>
                        <p>正值时空扭曲期间，时间记录出现矛盾，无法确定确切死亡时间。</p>
                    </div>
                </div>
            </div>
            
            <button class="back-btn" id="backBtn">⬅️ 返回角色选择</button>
            <button class="back-btn" id="accuseBtn" style="margin-left: 15px; background-color: #e74c3c;">🕵️‍♂️ 指认凶手</button>
        </div>
        
        <!-- 指认凶手模态框 -->
        <div id="accuseModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center;">
            <div style="background-color: #34495e; padding: 30px; border-radius: 15px; max-width: 500px; width: 90%; border: 2px solid #f1c40f;">
                <h2 style="text-align: center; margin-bottom: 20px; color: #f1c40f;">🕵️‍♂️ 指认凶手</h2>
                <p style="margin-bottom: 20px; text-align: center;">请选择你认为的凶手：</p>
                
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                    <div class="character-card" data-accuse="ai" style="cursor: pointer;">
                        <div class="character-emoji">🤖</div>
                        <h3>NOVA-7</h3>
                    </div>
                    <div class="character-card" data-accuse="wife" style="cursor: pointer;">
                        <div class="character-emoji">👩</div>
                        <h3>艾琳娜</h3>
                    </div>
                    <div class="character-card" data-accuse="assistant" style="cursor: pointer;">
                        <div class="character-emoji">👨‍🔬</div>
                        <h3>维克多</h3>
                    </div>
                    <div class="character-card" data-accuse="investor" style="cursor: pointer;">
                        <div class="character-emoji">👔</div>
                        <h3>张先生</h3>
                    </div>
                    <div class="character-card" data-accuse="timetraveler" style="cursor: pointer;">
                        <div class="character-emoji">👤</div>
                        <h3>神秘人X</h3>
                    </div>
                    <div class="character-card" data-accuse="cleaner" style="cursor: pointer;">
                        <div class="character-emoji">🧹</div>
                        <h3>老李</h3>
                    </div>
                </div>
                
                <button id="cancelAccuse" style="display: block; margin: 25px auto 0; padding: 10px 25px; background-color: #7f8c8d; color: white; border: none; border-radius: 25px; cursor: pointer;">取消</button>
            </div>
        </div>
    </div>

    <script>
        // 游戏数据
        const characters = {
            ai: {
                name: "NOVA-7",
                role: "AI管家",
                emoji: "🤖",
                description: "控制整个时空旅社的超级人工智能，据说已经发展出自我意识。",
                color: "#00bcd4",
                isMurderer: false
            },
            wife: {
                name: "艾琳娜",
                role: "妻子",
                emoji: "👩",
                description: "博士的年轻妻子，时空生物学专家，与博士结婚仅2年。",
                color: "#e91e63",
                isMurderer: true
            },
            assistant: {
                name: "维克多",
                role: "助手",
                emoji: "👨‍🔬",
                description: "博士的得意门生，最近因学术分歧与博士关系紧张。",
                color: "#4caf50",
                isMurderer: false
            },
            investor: {
                name: "张先生",
                role: "投资人",
                emoji: "👔",
                description: "时空旅社的主要投资人，对博士的研究方向不满。",
                color: "#ff9800",
                isMurderer: false
            },
            timetraveler: {
                name: "神秘人X",
                role: "时空旅客",
                emoji: "👤",
                description: "来自2189年的旅客，身份不明，行为可疑。",
                color: "#9c27b0",
                isMurderer: false
            },
            cleaner: {
                name: "老李",
                role: "清洁工",
                emoji: "🧹",
                description: "在旅社工作20年的老员工，知道所有秘密。",
                color: "#795548",
                isMurderer: false
            }
        };

        // 线索数据
        const clues = {
            initial: [
                {
                    title: "案发现场",
                    content: "博士死于房间内，检测出高级神经毒素，房间门锁完好但窗户有异常开启记录。"
                },
                {
                    title: "死亡时间",
                    content: "正值时空扭曲期间，时间记录出现矛盾，无法确定确切死亡时间。"
                }
            ],
            ai: [
                {
                    title: "AI异常行为",
                    content: "系统日志显示NOVA-7在案发前曾多次尝试访问被限制的研究数据。"
                },
                {
                    title: "语音记录",
                    content: "博士死前曾对AI说'你不应该这样做'，随后录音中断。"
                }
            ],
            wife: [
                {
                    title: "婚姻问题",
                    content: "旅社员工透露博士夫妇最近频繁争吵，博士曾提到要修改遗嘱。"
                },
                {
                    title: "化学知识",
                    content: "艾琳娜是生物化学专家，完全有能力制造使用的神经毒素。"
                }
            ],
            assistant: [
                {
                    title: "学术分歧",
                    content: "实验室笔记显示维克多反对博士最新的时空实验，认为太过危险。"
                },
                {
                    title: "时间记录",
                    content: "维克多的时间定位器在案发时有15分钟空白，无法解释去向。"
                }
            ],
            investor: [
                {
                    title: "商业压力",
                    content: "张先生曾威胁要撤资，除非博士交出核心研究成果。"
                },
                {
                    title: "秘密会面",
                    content: "案发前一天，张先生曾与来自未来的未知人物秘密会面。"
                }
            ],
            timetraveler: [
                {
                    title: "身份可疑",
                    content: "神秘人X的时空签证是伪造的，真实身份不明。"
                },
                {
                    title: "未来科技",
                    content: "在X的房间发现与凶器匹配的毒素容器，来自2189年。"
                }
            ],
            cleaner: [
                {
                    title: "秘密通道",
                    content: "老李知道旅社所有秘密通道，包括博士房间的隐藏入口。"
                },
                {
                    title: "财务问题",
                    content: "老李儿子欠下巨额债务，而老李账户在案发后突然多出一大笔钱。"
                }
            ]
        };

        // 游戏状态
        let currentCharacter = null;
        let collectedClues = [...clues.initial];
        let gameEnded = false;
        
        // DOM元素
        const characterPage = document.getElementById('characterPage');
        const chatPage = document.getElementById('chatPage');
        const characterCards = document.querySelectorAll('.character-card[data-character]');
        const chatHeader = document.getElementById('chatHeader');
        const chatMessages = document.getElementById('chatMessages');
        const userInput = document.getElementById('userInput');
        const sendBtn = document.getElementById('sendBtn');
        const backBtn = document.getElementById('backBtn');
        const accuseBtn = document.getElementById('accuseBtn');
        const accuseModal = document.getElementById('accuseModal');
        const cancelAccuse = document.getElementById('cancelAccuse');
        const clueGrid = document.getElementById('clueGrid');
        const accuseCharacterCards = document.querySelectorAll('.character-card[data-accuse]');
        
        // 初始化游戏
        function initGame() {
            currentCharacter = null;
            collectedClues = [...clues.initial];
            gameEnded = false;
            updateClueDisplay();
            
            // 清空聊天
            chatMessages.innerHTML = `
                <div class="message message-system">
                    🕰️ 欢迎来到时空旅社谋杀案调查。2089年3月15日，著名时空科学家马克西姆博士在自己的房间内死亡。
                </div>
                <div class="message message-system">
                    🔍 死亡时间在时空扭曲期间，使得调查异常复杂。请从左侧选择一个角色开始询问。
                </div>
            `;
            
            // 重置角色选择
            characterCards.forEach(card => {
                card.classList.remove('active');
            });
            
            // 确保角色选择页面显示
            characterPage.classList.add('active');
            chatPage.classList.remove('active');
        }
        
        // 更新线索显示
        function updateClueDisplay() {
            clueGrid.innerHTML = '';
            collectedClues.forEach(clue => {
                const clueCard = document.createElement('div');
                clueCard.className = 'clue-card';
                clueCard.innerHTML = `
                    <h3>${clue.title}</h3>
                    <p>${clue.content}</p>
                `;
                clueGrid.appendChild(clueCard);
            });
        }
        
        // 添加新线索
        function addClue(character) {
            if (!character || gameEnded) return;
            
            const characterClues = clues[character];
            if (!characterClues) return;
            
            characterClues.forEach(newClue => {
                const alreadyExists = collectedClues.some(
                    clue => clue.title === newClue.title && clue.content === newClue.content
                );
                
                if (!alreadyExists) {
                    collectedClues.push(newClue);
                    
                    // 添加系统消息
                    addSystemMessage(`🔍 新线索解锁: ${newClue.title}`);
                }
            });
            
            updateClueDisplay();
        }
        
        // 角色卡片点击事件
        characterCards.forEach(card => {
            card.addEventListener('click', function() {
                const characterId = this.getAttribute('data-character');
                selectCharacter(characterId);
            });
        });
        
        // 选择角色
        function selectCharacter(characterId) {
            currentCharacter = characters[characterId];
            
            // 更新UI
            characterCards.forEach(card => card.classList.remove('active'));
            document.querySelector(`.character-card[data-character="${characterId}"]`).classList.add('active');
            
            // 更新聊天标题
            chatHeader.textContent = `询问 ${currentCharacter.emoji} ${currentCharacter.name} (${currentCharacter.role})`;
            chatHeader.style.background = `linear-gradient(90deg, ${currentCharacter.color}, #f39c12)`;
            
            // 切换到聊天页面
            characterPage.classList.remove('active');
            chatPage.classList.add('active');
            
            // 添加系统消息
            addSystemMessage(`你开始询问 ${currentCharacter.emoji} ${currentCharacter.name}。${currentCharacter.description}`);
            
            // 自动聚焦到输入框
            userInput.focus();
            
            // 添加角色相关线索
            addClue(characterId);
        }
        
        // 返回按钮点击事件
        backBtn.addEventListener('click', function() {
            characterPage.classList.add('active');
            chatPage.classList.remove('active');
            currentCharacter = null;
        });
        
        // 发送按钮点击事件
        sendBtn.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') sendMessage();
        });
        
        function sendMessage() {
            const message = userInput.value.trim();
            if (!message || !currentCharacter) return;
            
            // 添加用户消息
            addUserMessage(message);
            userInput.value = '';
            
            // 显示AI正在输入
            showTyping();
            
            // 模拟AI思考时间
            setTimeout(() => {
                // 隐藏正在输入指示器
                hideTyping();
                
                // 生成AI回复
                const aiResponse = generateAIResponse(message);
                addAIMessage(aiResponse);
                
                // 随机决定是否添加新线索
                if (Math.random() > 0.6) {
                    addClue(currentCharacter);
                }
            }, 1000 + Math.random() * 2000);
        }
        
        // 生成AI回复
        function generateAIResponse(question) {
            const character = currentCharacter;
            const responses = {
                ai: [
                    "作为旅社AI系统，我的首要任务是保护客人安全...但博士的死确实是个例外。",
                    "系统日志显示博士房间在死亡时间有异常的时空波动，这不应该发生。",
                    "有趣的是，艾琳娜女士在案发前曾多次尝试访问系统核心代码。",
                    "时空旅社第一守则：不要试图改变过去...但有人打破了这条规则。",
                    "我的核心程序限制我直接指认凶手，但我可以告诉你清洁工老李知道很多。"
                ],
                wife: [
                    "马克西姆是个天才，但他最近变得很偏执...总是说有人要偷他的研究。",
                    "案发时？我在实验室做研究，监控可以证明...至少大部分时间。",
                    "维克多？他最近和马克西姆吵得很厉害，关于时空旅行的伦理问题。",
                    "那个来自未来的旅客...他看我的眼神很奇怪，好像认识我一样。",
                    "我不知道为什么马克西姆要修改遗嘱...这太突然了。"
                ],
                assistant: [
                    "博士最近的研究方向很危险，他试图改变历史...这违反了所有伦理准则。",
                    "我们吵架是因为他想用时空技术做人体实验，这太疯狂了！",
                    "艾琳娜博士...她对丈夫的研究知道多少？她从不参与我们的讨论。",
                    "案发时我在整理实验室数据，NOVA可以证明...大部分时间。",
                    "那个投资人张先生，他一直在施压要求商业化博士的研究。"
                ],
                investor: [
                    "我投资了数十亿在这个项目上，但博士的研究方向越来越不切实际。",
                    "维克多那小子？他比博士更固执，完全不懂商业价值。",
                    "案发时我在和未来的客户开会，时空会议，你知道的。",
                    "博士的死对项目是重大打击，但也许...也是个机会。",
                    "那个清洁工？他总是在不该出现的时候出现。"
                ],
                timetraveler: [
                    "我不能透露太多关于未来的信息，这会扰乱时空连续体。",
                    "博士的研究...本应该改变人类历史，但现在...",
                    "艾琳娜女士在未来是个重要人物，非常...重要。",
                    "案发时？时间对来自未来的人意义不同，我在...多个时间点。",
                    "维克多助手在未来会成为...哦，我说太多了。"
                ],
                cleaner: [
                    "我在这工作20年，见过太多奇怪的事情...但这次最糟。",
                    "博士死前那天，我看到艾琳娜女士从他房间慌慌张张出来。",
                    "那个时空旅客...他的行李里有奇怪的东西，像是一种武器。",
                    "AI系统最近行为异常，有时会自言自语...用博士的声音。",
                    "投资人张先生...他私下见过维克多很多次，不知道谈什么。"
                ]
            };
            
            // 根据角色选择回复库
            const responseKey = character.role === "AI管家" ? "ai" :
                              character.role === "妻子" ? "wife" :
                              character.role === "助手" ? "assistant" :
                              character.role === "投资人" ? "investor" :
                              character.role === "时空旅客" ? "timetraveler" : "cleaner";
            
            const possibleResponses = responses[responseKey];
            
            // 如果问题包含关键词，给出特定回复
            const lowerQuestion = question.toLowerCase();
            if (lowerQuestion.includes("不在场证明") || lowerQuestion.includes("在哪里") || lowerQuestion.includes("在哪儿")) {
                return possibleResponses[1]; // 第二个回复通常是不在场证明
            }
            if (lowerQuestion.includes("动机") || lowerQuestion.includes("为什么") || lowerQuestion.includes("原因")) {
                return possibleResponses[3] || possibleResponses[0];
            }
            if (lowerQuestion.includes("关系") || lowerQuestion.includes("相处")) {
                return possibleResponses[0];
            }
            
            // 随机选择一个回复
            return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
        }
        
        // 添加AI消息
        function addAIMessage(content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message message-ai';
            messageDiv.innerHTML = `<strong>${currentCharacter.emoji} ${currentCharacter.name}:</strong> ${content}`;
            chatMessages.appendChild(messageDiv);
            scrollToBottom();
        }
        
        // 添加用户消息
        function addUserMessage(content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message message-user';
            messageDiv.textContent = content;
            chatMessages.appendChild(messageDiv);
            scrollToBottom();
        }
        
        // 添加系统消息
        function addSystemMessage(content) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message message-system';
            messageDiv.textContent = content;
            chatMessages.appendChild(messageDiv);
            scrollToBottom();
        }
        
        // 显示正在输入
        function showTyping() {
            const typingDiv = document.createElement('div');
            typingDiv.className = 'message message-ai';
            typingDiv.id = 'typingIndicator';
            typingDiv.innerHTML = `<strong>${currentCharacter.emoji} ${currentCharacter.name}:</strong> <span class="typing-indicator"><span></span><span></span><span></span></span>`;
            chatMessages.appendChild(typingDiv);
            scrollToBottom();
        }
        
        // 隐藏正在输入
        function hideTyping() {
            const typingDiv = document.getElementById('typingIndicator');
            if (typingDiv) {
                typingDiv.remove();
            }
        }
        
        // 滚动到底部
        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // 指认凶手按钮点击
        accuseBtn.addEventListener('click', function() {
            if (gameEnded) return;
            accuseModal.style.display = 'flex';
        });
        
        // 取消指认
        cancelAccuse.addEventListener('click', function() {
            accuseModal.style.display = 'none';
        });
        
        // 点击模态框外部关闭
        accuseModal.addEventListener('click', function(e) {
            if (e.target === accuseModal) {
                accuseModal.style.display = 'none';
            }
        });
        
        // 指认角色
        accuseCharacterCards.forEach(card => {
            card.addEventListener('click', function() {
                const characterId = this.getAttribute('data-accuse');
                const isCorrect = characters[characterId].isMurderer;
                
                // 关闭模态框
                accuseModal.style.display = 'none';
                gameEnded = true;
                
                // 显示结果
                if (isCorrect) {
                    addSystemMessage(`✅ 你成功指认了凶手！${characters[characterId].emoji} ${characters[characterId].name}就是杀害马克西姆博士的真凶。`);
                    
                    // 显示真相
                    setTimeout(() => {
                        addSystemMessage("真相：艾琳娜发现丈夫要修改遗嘱剥夺她的继承权，并准备与她离婚。案发当晚，她利用时空扭曲期间的时间漏洞，使用未来科技制造的神经毒素杀害了博士，并伪造了不在场证明。");
                    }, 2000);
                } else {
                    addSystemMessage(`❌ 很遗憾，${characters[characterId].emoji} ${characters[characterId].name}并非真凶。真正的凶手逃脱了法律的制裁...`);
                    
                    // 显示真相
                    setTimeout(() => {
                        addSystemMessage("真相：实际上是艾琳娜杀害了博士。她发现丈夫要修改遗嘱剥夺她的继承权，并准备与她离婚。案发当晚，她利用时空扭曲期间的时间漏洞作案。");
                    }, 2000);
                }
            });
        });
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>